Blazor WebAssembly By Example - Second Edition by Toi B. Wright

Author:Toi B. Wright
Language: eng
Format: epub
Publisher: Packt
Published: 2023-11-15T00:00:00+00:00

Press Ctrl+F5 to start the application without debugging.

Verify that the top of the page is now blue.

Close the browser.

Now that Bootstrap is properly installed, we can add the new component.

Add a DailyForecast component

We need the new component to display each day’s forecast. We do this as follows:

Right-click the WeatherForecast project and select the Add, New Folder option from the menu.

Name the new folder Shared.

Right-click the Shared folder and select the Add, Razor Component option from the menu.

Name the new component DailyForecast.

Click the Add button.

Replace the existing markup with the following markup: <div class="card text-center"> <div class="card-header"> @Date </div> <div class="card-body"> <img src="@IconUrl" /> <h4 class="card-title">@Description</h4> <b>@((int)HighTemp) F&deg;</b> / @((int)LowTemp) F&deg; </div> </div> @code { }

This component uses the Card component from Bootstrap to display the daily forecast.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.